import React, { Component, CSSProperties } from 'react';
import { Icon } from 'antd-mobile';
import CreatePortal from '../CreatePortal/index';
const Styles: {
  modal: CSSProperties;
  body: CSSProperties;
  close: CSSProperties;
} = {
  modal: {
    position: 'relative',
    top: '0',
    left: '0',
    zIndex: 999,
  },
  body: {
    backgroundColor: '#fff',
    position: 'fixed',
    height: '100%',
    width: '100%',
    top: '0',
    left: '0',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  close: {
    position: 'absolute',
    top: '10px',
    right: '10px',
  },
};

interface props {
  onClose: Function;
  styleBody: object;
  styleClose?: object;
  show: boolean;
}

export default class Modal extends Component<props> {
  onClose: Function;
  styleBody: object;
  styleClose: object | undefined;
  state = {
    showModal: false,
  };
  show: boolean;
  constructor(props: props) {
    super(props);
    this.onClose = props.onClose;
    this.styleBody = props.styleBody;
    this.styleClose = props.styleClose;
    this.show = false;
  }

  componentWillReceiveProps(nextProps: any) {
    this.setState({
      showModal: nextProps.show,
    });
  }

  render() {
    const { showModal } = this.state;
    const _styleBody = {
      ...Styles.body,
      ...this.styleBody,
    };
    const _styleClose = {
      ...Styles.close,
      ...this.styleClose,
    };
    return (
      <>
        {showModal ? (
          <CreatePortal style={Styles.modal}>
            <div style={_styleBody}>
              {this.props.children}
              <Icon
                type="cross"
                size="lg"
                style={_styleClose}
                onClick={() => this.onClose()}
              />
            </div>
          </CreatePortal>
        ) : null}
      </>
    );
  }
}
